<template>
    <div>
        <nut-demoheader 
        :name="$route.name"
        ></nut-demoheader>
        <h5>示例</h5>
        <p>默认用法</p>
        <nut-steps stepsId="step1">
          <nut-step stepTitle="您的订单已经发往北京"><p>2017-12-12</p></nut-step>
          <nut-step stepTitle="您的订单已经到达上海"><p>2017-12-11</p></nut-step>
          <nut-step stepTitle="快递公司已揽件"><p>2017-12-10</p></nut-step>
        </nut-steps>
        
        <p>可配置活动数值，显示进度数字以及title具体每个进度条的高度</p>
        <nut-steps stepsId="step2" :active="2" :showNum='true' :titleTop="0.4">
          <nut-step stepTitle="您的订单已经发往北京"><p>2017-12-12</p></nut-step>
          <nut-step stepTitle="您的订单已经到达上海"><p>2017-12-11</p></nut-step>
          <nut-step stepTitle="快递公司已揽件"><p>2017-12-10</p></nut-step>
        </nut-steps>
        
        <p>可以设置进度条为图片</p>
        <nut-steps stepsId="step3" :active="1">
          <nut-step stepTitle="您的订单已经发往北京" icon=""><p>2017-12-12</p></nut-step>
          <nut-step stepTitle="您的订单已经到达上海" icon=""><p>2017-12-11</p></nut-step>
          <nut-step stepTitle="快递公司已揽件" icon=''><p>2017-12-10</p></nut-step>
        </nut-steps>
        
    </div>
</template>

<script>
import Vue from 'vue';
export default {
    data(){
        return{
        
        }
    },
    methods:{
    }
}
</script>

<style lang="scss" scoped>

</style>


